<template>
  <div id="orgWebsiteDetail">
    <v-title
      title="网点详情"
      text1="创建人: "
      :value1="obj.founder"
      text2="创建时间: "
      :value2="obj.creatTime"
      isShow="true"
    ></v-title>
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item label="网点名称：">
          <div class="textInner">{{obj.latticeName}}</div>
        </el-form-item>
				<el-form-item label="机构标识：">
					<div class="textInner">{{obj.organid}}</div>
				</el-form-item>
				<el-form-item label="网点标识：">
					<div class="textInner">{{obj.id}}</div>
				</el-form-item>
        <el-form-item label="区域选择：">
          <div class="textInner">{{address.province}}{{address.city}}{{address.county}}</div>
        </el-form-item>
        <el-form-item label="网点地址：">
          <div class="textInner">{{address.village}}</div>
        </el-form-item>
        <el-form-item label="网点管理员：">
          <div class="textInner">{{obj.name}}</div>
        </el-form-item>
        <el-form-item label="业务类型：">
          <ul class="classify">
            <li v-for="(item,index) in  obj.business">{{item.businessName}}</li>
            <li>
              <el-button type="text" @click="getBusiness()">查看详情</el-button>
            </li>
          </ul>
        </el-form-item>
        <el-form-item label="预约规则：">
          <div class="textInner">
            {{obj.latticeName}}预约规则
            <el-button type="text" @click="getRule()">查看详情</el-button>
          </div>
        </el-form-item>
        <el-form-item label="预约须知：">
          <div class="textInner">
            {{obj.latticeName}}预约须知
            <el-button type="text" @click="getnoteDialog()">查看详情</el-button>
          </div>
        </el-form-item>
        <el-form-item label="窗口信息：">
          <ul class="classify">
            <li v-for="(item,index) in obj.window" :key="item.id">{{item.windowName}}</li>
            <li>
              <el-button type="text" @click="getWindow()">查看详情</el-button>
            </li>
          </ul>
        </el-form-item>
        <el-form-item label="设备信息：">
          <ul class="classify">
            <li v-for="(item,index) in obj.equipment" :key="item.id">{{item.name}}</li>
            <li>
              <el-button type="text" @click="getequipmentDialog()">查看详情</el-button>
            </li>
          </ul>
        </el-form-item>
        <!-- <el-form-item label="创建人：">
					<div class="textInner">{{obj.founder}}</div>
				</el-form-item>
				<el-form-item label="创建时间：">
					<div class="textInner">{{obj.creatTime}}</div>
        </el-form-item>-->
        <el-form-item label="备注：">
          <div class="textInner">{{obj.remarks}}</div>
        </el-form-item>
      </el-form>
      <!-- 业务类型弹窗 -->
      <el-dialog title="业务类型" :visible.sync="businessDialog" width="50%" center>
        <el-tabs type="border-card" v-model="activeNameBus" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item,index) in  obj.business"
            :key="item.id"
            :label="item.businessName"
            :name="item.index"
          >
            <el-form ref="form" label-width="100px">
              <el-form-item label="主业务名称：">
                <div class="textInner">{{item.businessName}}</div>
              </el-form-item>
              <el-form-item label="业务描述：">
                <div class="textInner">{{item.businessDescription}}</div>
              </el-form-item>
              <el-form-item label="创建时间：">
                <div class="textInner">{{item.creatTime}}</div>
              </el-form-item>
              <el-form-item label="创建人：">
                <div class="textInner">{{item.name}}</div>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
      <!-- 预约规则弹窗 -->
      <el-dialog title="预约规则" :visible.sync="ruleDialog" width="50%" center>
        <el-form ref="form" label-width="120px">
          <el-form-item label="预约日期：">
            <div class="textInner">{{rule.workDate}}</div>
            <div class="textInner" style="display: flex;flex-wrap: wrap;align-items: center;">
              非预约日期设置：
              <span v-for="(item,i) in dateArr" :key="i">{{item}}</span>
            </div>
          </el-form-item>
          <el-form-item label="预约时间段：">
            <div class="textInner">
              <p v-for="(r,i) in rule.bookingPeopleArr" :key="i">
                <span>{{r.startTime}}-{{r.endTime}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>最多预约{{r.number}}人</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>未预约用户最多可取号{{r.offlineNum}}个</span>
              </p>
            </div>
          </el-form-item>
          <el-form-item label="提前预约：">
            <div class="textInner">最低可提前{{rule.appoDayStart}}天预约 至 最高可提前{{rule.appoDayEnd}}天预约</div>
          </el-form-item>
          <el-form-item label="预约取号：">
            <div class="textInner">每人每天可预约次数为{{rule.maxAppoNum}}次</div>
          </el-form-item>
          <el-form-item label="取号设置：">
            <div class="textInner">
              <span v-if="!rule.takeNumSet">当天上午只取上午的号码，下午只取下午的号码</span>
              <span v-else>当天可取当天所有号码</span>
            </div>
          </el-form-item>
          <el-form-item label="爽约机制选择：">
            <div class="textInner">
              <span
                v-if="rule.breakAppoSet == true"
              >采用爽约机制 &nbsp;&nbsp; 若爽约达到{{rule.breakNum}}次，则{{rule.breakDay}}天内不可预约</span>
              <span v-else>不采用爽约机制</span>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 公告弹窗 -->
      <el-dialog title="预约须知" :visible.sync="noteDialog" width="50%" center>
        <el-form ref="form" label-width="120px">
          <el-form-item label="查看须知规则：">
            <span class="rightText" v-if="notes.viewnotes == 1">不强制查看</span>
            <span class="rightText" v-else-if="notes.viewnotes == 2">每天强制查看</span>
            <span class="rightText" v-else-if="notes.viewnotes == 3">每次强制查看</span>
          </el-form-item>
          <el-form-item label="须知说明：">
            <p v-for="(item,i) in noteArr" :key="i">{{item}}</p>
          </el-form-item>
          <el-form-item label="创建人：">
            <p>{{notes.founder}}</p>
          </el-form-item>
          <el-form-item label="创建时间：">
            <p>{{notes.createtime}}</p>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 窗口信息弹窗 -->
      <el-dialog title="窗口信息" :visible.sync="windowDialog" width="50%" center>
        <el-tabs type="border-card" v-model="activeNameWindow" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item,i) in  obj.window"
            :key="item.id"
            :label="item.windowName"
            :name="item.index"
          >
            <el-form ref="form" label-width="100px">
              <el-form-item label="窗口名称：">
                <span class="rightText">{{ item.windowName }}</span>
              </el-form-item>
              <!-- <el-form-item label="业务类型：">
								<span class="rightText">{{ item.businessName }}</span>
              </el-form-item>-->
              <el-form-item label="工作人员：">
                <span class="rightText">{{item.worker}}</span>
              </el-form-item>
              <el-form-item label="联系方式：">
                <span class="rightText">{{item.iphone}}</span>
              </el-form-item>
              <!-- <el-form-item label="链接设备：">
								<span class="rightText" v-for="(item,i) in listItem.equipment" :key="i"> {{ item.name }} </span>
              </el-form-item>-->
              <el-form-item label="备注：">
                <span class="rightText">{{ item.remarks }}</span>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
      <!-- 设备信息弹窗 -->
      <el-dialog title="设备信息" :visible.sync="equipmentDialog" width="50%" center>
        <el-tabs type="border-card" v-model="activeNameEquipment" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item,i) in  obj.equipment"
            :key="item.id"
            :label="item.name"
            :name="item.index"
          >
            <el-form ref="form" label-width="100px">
              <el-form-item label="设备类型：">
                <div v-if="item.type == 'qhj' " class="textInner">取号机</div>
                <div v-else-if="item.type == 'hjq' " class="textInner">呼叫器</div>
                <div v-else-if="item.type == 'led' " class="textInner">LED屏</div>
                <div v-else-if="item.type == 'pjq' " class="textInner">评价器</div>
                <div v-else-if="item.type == 'dp' " class="textInner">电视机</div>
              </el-form-item>
              <el-form-item label="设备名称：">
                <div class="textInner">{{item.name}}</div>
              </el-form-item>
              <el-form-item label="地址码：">
                <div class="textInner">{{item.uniqueldentifier}}</div>
              </el-form-item>
              <!-- <el-form-item label="连接窗口：">
								<div class="textInner">{{item.windowName}}</div>
              </el-form-item>-->
              <el-form-item label="设备品牌：">
                <div class="textInner">{{item.manufacturer}}</div>
              </el-form-item>
              <el-form-item label="生产厂家：">
                <div class="textInner">{{item.manufacturer}}</div>
              </el-form-item>
              <el-form-item label="设备型号：">
                <div class="textInner">{{item.equipmentmodel}}</div>
              </el-form-item>
              <el-form-item label="连接状态：">
                <div class="textInner">
                  <span v-if="item.isState == false">
                    <em style="color: #FD3B38;">连接异常</em>
                    <i>{{item.creatTime}}</i>
                  </span>
                  <span v-else style="color: #11a254;">连接正常</span>
                </div>
              </el-form-item>
              <el-form-item label="备注：">
                <div class="textInner">{{item.welcomelanguage}}</div>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import vTitle from "./view/titleDiv.vue";
import { orgWebsiteDetail, makeSearch } from "../api/getData.js";
export default {
  name: "orgWebsiteDetail",
  components: {
    vTitle
  },
  data: function() {
    return {
      value1: "",
      latticeid: "",
      obj: {},
      businessDialog: false, //业务类型弹窗
      equipmentDialog: false, //设备信息弹窗
      ruleDialog: false, //预约规则弹窗
      windowDialog: false, //窗口弹窗
      noteDialog: false, //公告弹窗
      activeNameBus: "0",
			activeNameWindow: "0",
			activeNameEquipment: "0",
      rule: {}, //规则
      notes: {}, //公告须知
      dateArr: [],
      noteArr: [],
      address: {}
    };
  },
  created: function() {
    this.getParams();
    this.getDetail();
  }, // 创建时
  beforeMount: function() {}, // 挂载之前
  mounted: function() {}, // 挂载之后
  beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
  updated: function() {}, // 数据更新后,渲染后调用(禁止)
  beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
  destroyed: function() {}, // 实例销毁后调用
  methods: {
    getBusiness() {
      console.log(this.obj.business, "this.obj.business");
      if (this.obj.business.length > 0) {
        this.businessDialog = true;
      } else {
        this.$message.error("网点业务类型没有创建");
      }
    },
    getnoteDialog() {
      console.log(this.noteArr, "this.noteArr");
      if (this.noteArr == "") {
        this.$message.error("该网点预约须知没有创建");
      } else {
        this.noteDialog = true;
      }
    },
    getWindow() {
      if (this.obj.window.length > 0) {
        this.windowDialog = true;
      } else {
        this.$message.error("该网点窗口没有创建");
      }
    },
    getequipmentDialog() {
      if (this.obj.equipment.length > 0) {
        this.equipmentDialog = true;
      } else {
        this.$message.error("该网点设备没有创建");
      }
    },
    getParams() {
      var routerParams = this.$route.query.id; // 将数据放在当前组件的数据内
      console.log("传来的参数==" + routerParams);
      this.latticeid = routerParams;
    },
    getDetail() {
      orgWebsiteDetail({ latticeid: this.latticeid })
        .then(res => {
          console.log(res.data, "机构网点详情");
          if (res.data.code === 0) {
            // 标签页name值须为字符串类型且唯一，手动添加一个键值对，并转化为字符串类型
            if (res.data.data.business) {
              res.data.data.business.forEach((item, index) => {
                item.index = index.toString();
              });
            }
            if (res.data.data.equipment) {
              res.data.data.equipment.forEach((item, index) => {
                item.index = index.toString();
              });
            }

            if (res.data.data.window) {
              res.data.data.window.forEach((item, index) => {
                item.index = index.toString();
              });
            }

            this.notes = res.data.data.rule;
            if (res.data.data.rule) {
              this.noteArr = res.data.data.rule.notes.toString().split("\n");
            }

            // console.log(typeof this.noteArr,this.noteArr)
            this.obj = res.data.data;
            this.address = res.data.data.localhost;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 预约规则
    getRule() {
      makeSearch({ latticeId: this.latticeid })
        .then(res => {
          console.log(res.data, "查询预约规则");
          if (res.data.code == 0) {
            this.ruleDialog = true;
            console.log(res.data.data.holiday.split(","), "111111");
            this.dateArr = res.data.data.holiday.split(",").join(",");
            this.rule = res.data.data;
          } else {
            this.ruleDialog = false;
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    }
  } // 函数
};
</script>
<style lang='scss'>
#orgWebsiteDetail {
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    line-height: 64px;
    background: #fff;
    overflow: hidden;
    text-align: left;
    padding: 0 20px;
    color: #333437;
    font-size: 16px;
  }
  .main {
    margin-top: 20px;
    padding: 40px 200px;
    background: #fff;
    .el-form-item {
      margin-bottom: 0;
    }
    .classify {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      li {
        margin-right: 20px;
      }
    }
  }
}
</style>
